<template>
  <div>
    <c-title :text="text"></c-title>
    <Card  :list="list" @onChange="onChange" :url="url" :member="member" :course_name="course_name" @delete_card="delete_card"></Card>
  </div>
</template>

<script>
import Card from "./components/card.vue"
import { scrollMixin } from '../../utils/mixin';
export default {
  components: { Card},
  minxin: [scrollMixin],
  data() {
    return {
      text:"",
      list: [],
      current_page:1,
      last_page:1,
      isLoadMore:true,

      member:{},
      url:"",
      course_name:"",
    };
  },
  activated() {
    this.isLoadMore = true;
    this.list = [];
    this.getData();
  },
  methods: {
    delete_card(){
      Dialog.confirm({
      title: '是否删除会员卡',
    })
      .then(() => {
        $http.post("plugin.water-machine.frontend.consumer.member-card.unbind").then(res=>{
        this.$toast(res.msg);
        if(res.result){
          this.getData();
        }
      })
      })
      .catch(() => {
        // on cancel
      });
    },
    onChange(active) {
      if (active == 1) {
        this.get_consumption();
      } else if (active == 2) {
        this.get_recharge()
      } else if (active == 3) {
        this.get_gift()
      }
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      let page = this.current_page + 1;
      if (this.active == 1) {
        this.get_consumption(page);
      } else if (this.active == 2) {
        this.get_recharge(page)
      } else if (this.active == 3) {
        this.get_gift(page)
      }
    },

    get_consumption(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.consumption', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    get_recharge(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.recharge', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    get_gift(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.gift', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    getData() {
      $http.get('plugin.water-machine.frontend.consumer.member-card.index').then(res => {
        if (res.result) {
          let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")) || res.basic_info;
          let text =  basic_info&&basic_info.plugin_setting.water_machine_header;
          this.text = text;
          this.fun.setWXTitle(text)
          this.member = res.data.member;

          if (res.data.member) {
            this.type = 2;
            this.member = res.data.member;
          } else {
            this.type = 1;
          }
          this.url = res.data.course_url;
          this.course_name = res.data.course_name;
        } else {
          this.$toast(res.msg);
        }
      })
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-tabs__nav {
  background-color: unset !important;
}

.water-use-card {
  .fz-40 {
    font-size: 1.25rem;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .fz-56 {
    font-size: 1.75rem;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fw-600 {
    font-weight: 600;
  }

  .fz-30 {
    font-size: 0.9375rem;
  }

  .c-7E7E7E {
    color: #7e7e7e;
  }

  .c-ffb55e {
    color: #ffb55e;
  }

  .flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mt25 {
    margin-top: 1.7813rem;
  }

  .flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .c-6A6A6A {
    color: #6a6a6a;
  }

  .Presented-item {
    padding: 0.875rem;
    font-size: 0.75rem;
  }

  .mt-10 {
    margin-top: 0.625rem;
  }

  .mb-30 {
    margin-bottom: 1.875rem;
  }

  .felx-column {
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  .line {
    width: calc(100% - 1.25rem);
    height: 0.0313rem;
    background: #eee;
    margin: 0.1875rem auto 0;
  }

  .Presented {
    background: #fff;
    margin: 0.7813rem 1.125rem 1.25rem;
    border-radius: 0.625rem;
  }

  .c-EF5452 {
    color: #ef5452;
  }

  .flex {
    display: flex;
  }

  .mt33 {
    margin-top: 2.0625rem;
  }

  .server {
    background: #fff;
    margin: 1.25rem 1.125rem;
    border-radius: 0.625rem;
    padding: 1.0938rem 1.2813rem 0.7813rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .server text {
    font-size: 0.75rem;
    color: #7e7e7e;
    margin-top: 0.375rem;
  }

  .server img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .head {
    position: relative;
    color: #fff;
  }

  .head img {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10.5625rem;
    z-index: -1;
  }

  .fz-50 {
    font-size: 1.5625rem;
  }
}
</style>
